@extends('layouts.buz.layout')
@section('content')
    <input type="hidden" id="app_id" value="{{$id}}">

    <div id="sidebar" class="collapse navbar-collapse col-md-2 col-sm-3">
        <!-- Start .sidebar-inner -->
        <div class="sidebar-inner">
            <ul id="sideNav" class="nav nav-pills nav-stacked">
                <li class="on">
                    <a href="/app/{{$id}}/orders">
                        <div class="col-sm-9  col-xs-10">
                            <h4>支付</h4>
                        </div>
                        <div class="col-sm-3  col-xs-2">
                            <i class="arrowW"></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="/app/{{$id}}">
                        <div class="col-sm-9  col-xs-10">
                            <h4>应用信息</h4>
                        </div>
                        <div class="col-sm-3  col-xs-2">
                            <i class="arrowH"></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="/app/paychanle">
                        <div class="col-sm-9  col-xs-10">
                            <h4>已开通支付通道</h4>
                        </div>
                        <div class="col-sm-3  col-xs-2">
                            <i class="arrowH"></i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- End .sidebar-inner -->
    </div>

    <div class="yhy-member col-sm-9 col-sm-push-3 col-md-10 col-md-push-2 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    支付
                </h4>
            </div>
            <div class="panel-body">

                <div class="row y-mt60">
                    <div class="col-sm-12 col-md-12 lineH28">
                        <div class="col-sm-3 col-md-3 padd">
                            <select class="form-control">
                                <option>创建时间</option>
                                <option>支付时间</option>
                            </select>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <input size="16" type="text"  id="starttime" class="form_datetime form-control" style="width: 100%;">
                        </div>
                        <div class="col-sm-3 col-md-3 padd">
                            <input size="16" type="text" id="endtime" class="form_datetime form-control" >
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 lineH28 padd y-mt10">
                        <div class="col-sm-3 col-md-3">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-5 col-md-5 padd control-label">支付状态</label>
                                <div class="col-sm-7 col-md-7 padd">
                                    <select class="form-control">
                                        <option>全部</option>


                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-5 col-md-5 padd control-label" >通道类型</label>
                                <div class="col-sm-7 col-md-7 padd">
                                    <select class="form-control" id="chanleType">
                                        <option value="all">全部</option>
                                        <option value="weixin">微信扫码</option>
                                        <option value="alipay">支付宝扫码</option>
                                        <option value="bank">在线银行</option>
                                        <option value="weixin_wap">微信wap</option>
                                        <option value="alipay_wap">支付宝wap</option>
                                        <option value="bank_wap">银联在线</option>
                                        <option value="weixin_sdk">微信SDK</option>
                                        <option value="alipay_sdk">支付宝SDK</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <input class="form-control" type="text" />
                        </div>
                        <div class="col-sm-2 col-md-2">
                            <button type="button" class="btn btn-primary" id="search" onclick="SearchData()">查询</button>
                        </div>
                    </div>

                </div>
                <div class="historyList">
                    <table class="table table-striped table-bordered" id="table">
                        {{--<thead>--}}
                        {{--<tr>--}}
                            {{--<th data-field="created_at">创建时间</th>--}}
                            {{--<th data-field="mch_no">商户订单号</th>--}}
                            {{--<th data-field="plat_no">平台订单号</th>--}}
                            {{--<th data-field="payment.name">支付方式</th>--}}
                            {{--<th data-field="order_status">支付状态</th>--}}
                            {{--<th data-field="order_amt">支付金额</th>--}}
                            {{--<th data-filed="updated_at">支付时间</th>--}}
                            {{--<th data-file="notify">通知</th>--}}
                        {{--</tr>--}}
                        {{--</thead>--}}
                        {{--<tbody>--}}
                        {{--<tr>--}}
                            {{--<td>2017-10-18 10:50:45</td>--}}
                            {{--<td>20141254587455</td>--}}
                            {{--<td>123564565455654565</td>--}}
                            {{--<td>支付宝SDK</td>--}}
                            {{--<td>支付成功</td>--}}
                            {{--<td>5.00</td>--}}
                            {{--<td>fd5fd54f-454df54d5f-dfdf4545-45445445454545</td>--}}
                            {{--<td></td>--}}
                            {{--<td>2017-10-18 10:25:30</td>--}}
                            {{--<td>--}}
                                {{--<button type="button" class="btn btn-info" id="">补发通知</button>--}}
                                {{--<button type="button" class="btn btn-info" id="detailList">详情</button>--}}
                            {{--</td>--}}
                        {{--</tr>--}}
                        {{--</tbody>--}}
                        {{--<tbody>--}}
                        {{--<tr>--}}
                            {{--<td>本页小计</td>--}}
                            {{--<td colspan="9" class="red">33333</td>--}}
                        {{--</tr>--}}
                        {{--<tr>--}}
                            {{--<td>合计</td>--}}
                            {{--<td colspan="9" class="red">33333</td>--}}
                        {{--</tr>--}}
                        {{--</tbody>--}}
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection()

@section('dialog')
    <div class="modal fade" id="detailInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">交易详情</h4>
                </div>
                <div class="modal-body textC fontSize1">
                    <table class="tab table-bordered">
                        <tbody>
                        <col width="15%" />
                        <col width="35%" />
                        <col width="15%" />
                        <col width="35%" />
                        <tr>
                            <td>创建时间</td>
                            <td>2017-11-10 10:25:63</td>
                            <td>支付时间</td>
                            <td>2017-11-10 10:25:63</td>
                        </tr>
                        <tr>
                            <td>商户订单号</td>
                            <td>123456131545454</td>
                            <td>聚宝订单号</td>
                            <td>1234545455</td>
                        </tr>
                        <tr>
                            <td>支付金额</td>
                            <td>5.0</td>
                            <td>付款方</td>
                            <td>1112121231</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
                <div class="modal-footer textC">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
@endsection()
@section('bottom_js')
    <script>


        //时间
        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            autoclose: true,
            todayBtn: true,
            minView: 1,
            inline: true
        });


        $("#detailList").click(function(){
            var self=$(this);
            $('#detailInfo').modal('show');
        })

        $(function () {
            $("#starttime").datetimepicker( 'setDate', new Date());
            $("#endtime").datetimepicker( 'setDate', new Date());
            var $id = $("#app_id").val();
            $('#table').bootstrapTable({
                url: '/api/app/'+$id+'/recharge',
//                url:'/api/app/1/recharge?search=payment.identify:weixin&searchJoin=and&start_at=2016-11-01 00:00:00&end_at=2017-11-03 12:32:32',
                queryParamsType: '',              //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                queryParams: queryParams,
                method: "get",
                pagination: true,
                pageNumber: 1,
                pageSize: 20,
                pageList: [10, 20, 50, 100],
                sidePagination: "server",         //分页方式：client客户端分页，server服务端分页（*）
                striped: true,                    //是否显示行间隔色
                cache: false,
                uniqueId: "id",               //每一行的唯一标识，一般为主键列
                height:700,
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                onLoadSuccess: function(data){  //加载成功时执行
                    //这个地方可以放每页的统计信息

                },
                responseHandler: function(res) {
                    filterAjaxData(res);
                    return {
                        "total": res.data.total,//总页数
                        "rows": res.data.data   //数据
                    };
                },
                columns: [
//                    { checkbox: true },
                    { title: 'ID', field: 'id', visible: false, width: 50, align: "center", formatter: function (value, row, index) { return index + 1; } },
                    { title: '平台订单号', field: 'plat_no' },
                    { title: '商户订单号', field: 'merchant_no' },
                    { title: '订单金额', field: 'order_amt' },
                    { title: '订单金额', field: 'order_status',formatter: function (value, row, index) {
                        if(value==0){return "未支付"}else{return "已完成"}
                    } },
                    { title: '创建时间', field: 'created_at' },
                    { title: '支付方式', field: 'payment.name' },
                    { title: '通知', field: 'notify',formatter: function (value, row, index) {
                        if(value){if(value.status==0){return "未成功"}else { return "已成功"}}else{return ""}
                    }
                    },
                ],
            });
        })
        //查询条件
        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                page: params.pageNumber,
                start_at: $("#starttime").val(),
                end_at: $("#endtime").val(),
                payment: $("#chanleType").val(),
            };
        }
        function SearchData() {
            //判断时间
            var starttime=$("#starttime").val();
            var endtime=$("#endtime").val();
            if(starttime==null||endtime==null){
                //setTimeout(function () {
                alert("时间不能为空");
                //}, 230);
                return false;
            }
            //判断时间的大小
//            var ts1 = Date.parse(starttime.replace(/-/g, '/ '));
//            var ts2 = Date.parse(endtime.replace(/-/g, '/ '));
//            var ts = ts2-ts1;
//            console.log(ts);
//            if(ts<=0){
//                alert("截止时间小于开始时间，请重新选择！");
//                return false;
//            }
            $('#table').bootstrapTable('refresh', { pageNumber: 1 });
        }

    </script>
@endsection()
